import React from 'react'
import { ProductCard, Tag, Checkbox } from 'react-vant';
import { cartNum, checkOne, removeCart } from '../../../models';
import { SwipeCell, Button, Toast } from 'react-vant';

export default function Cartlist(props) {
    const updateNum = (n, id) => {
        if (n < 1) {
            n = 1
        }
        let data = {
            cartid: id,
            num: n
        }
        cartNum(data).then(res => {
            console.log(res);
            props.getCartList()
        })
    }
    const changeOne = (bool, id) => {
        let flag = !bool
        checkOne({
            cartid: id,
            flag
        }).then(res => {
            console.log(res);
            let bool = props.cartlist.every(item => item.flag)
            props.setType(bool)
            props.getCartList()
        })
    }
    const cartRemove = (id) => {
        removeCart(id).then(res => {
            console.log(res);
            props.getCartList()
        })
    }

    return (
        <div>
            length: {props.cartlist.length}
            {
                props.cartlist.map(item => {
                    return (
                        <SwipeCell
                            key={item.cartid}
                            onOpen={() => Toast.info('打开')}
                            onClose={() => Toast.info('关闭')}
                            rightAction={
                                <Button onClick={() => cartRemove(item.cartid)} style={{ height: '100%' }} square type="danger">
                                    删除
                                </Button>
                            }
                        >
                            <div style={{ display: 'flex' }} >
                                <Checkbox checked={item.flag} onChange={() => changeOne(item.flag, item.cartid)}></Checkbox>
                                <ProductCard
                                    price={item.originprice}
                                    title={item.proname}
                                    thumb={item.img1}
                                    style={{ width: 'calc(100% - 20px)' }}
                                    tags={
                                        <div style={{ position: 'absolute', right: '10px' }}>
                                            <Tag onClick={() => updateNum(item.num - 1, item.cartid)} plain round type="danger" style={{ marginRight: 5, width: '22px', height: '22px', paddingLeft: 8, boxSizing: 'border-box', fontSize: '16px' }}>
                                                -
                                            </Tag>
                                            <span style={{ fontSize: '16px' }}>{item.num}</span>
                                            <Tag onClick={() => updateNum(item.num + 1, item.cartid)} round type="danger" style={{ marginLeft: 5, width: '22px', height: '22px', paddingLeft: 6, boxSizing: 'border-box', fontSize: '16px' }}>
                                                +
                                            </Tag>
                                        </div>
                                    }
                                />
                            </div>
                        </SwipeCell>

                    )
                })
            }
        </div>
    )
}
